<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title> 财政主要考核指标</title>
    <link rel="stylesheet" href="/index/css/bootstrap.css">
    <link rel="stylesheet" href="/index/css/Reset.css">
    <!-- 页面css -->
    <style>
        body {
            color: #000;
        }

        .content > .item {
            background: #EBEBEB;
            padding: 5px;
            border-radius: 8px;
            margin-bottom: 10px;
        }

        .row {
            margin-bottom: 15px !important;
        }

        .progress,
        .blue-bg {
            background: #6BD5E5;
        }

        .progress-bar,
        .yellow-bg {
            background: #FFCC59;
        }

        .samll-font p {
            display: inline-block;
        }

        .blue-bg,
        .yellow-bg {
            width: 30px;
            height: 15px;
            display: inline-block;
            vertical-align: middle;
        }

        .row em {
            color: #346382;
            font-weight: 800;
        }
    </style>
</head>


<body>
<div class="content">
    <div class="item">
        <div class="row no-margin">
            <div class="col-xs-12" style="font-size:18px;">当年一般公共预算支出进度</div>
        </div>
        <div class="row no-margin">
            <div class="col-xs-3">支出进度</div>
            <div class="col-xs-3"><em style="font-size:18px;">139.9</em>%</div>
            <div class="col-xs-6">
                <div class="progress">
                    <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0"
                         aria-valuemax="100"
                         style="width: 90%;">
                    </div>
                </div>
            </div>
        </div>
        <div class="row samll-font no-margin">
            <div class="col-xs-3">排名</div>
            <div class="col-xs-9">
                <span class="yellow-bg"></span>
                <p>上一般公共预算支出：314271万元</p>

            </div>
        </div>
        <div class="row samll-font no-margin">
            <div class="col-xs-3"><em>67</em></div>
            <div class="col-xs-9">
                <span class="blue-bg"></span>
                <p>截止11月底一般公共预算及转移支付结转结余：314271万元</p>
            </div>
        </div>
    </div>
</div>


<script src="js/jquery.min.js"></script>
<script src="js/echarts.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- 本页面js -->
<script src="js/indicators/indicators.js"></script>
<script>
    $(function () {
        $.ajax({
            url: "/index/indicators/viewData",
            type: "POST",
            dataType: "json", //返回数据形式为json
            contentType: 'application/json;charset=UTF-8',
            data: JSON.stringify({}),
            success: function (res) {
                if (res.code == "200") {
                    var item = res.data;
                    var html = "";
                    for (var i = 0;i<item.length;i++) {
                        var arr= item[i];
                        html += '\<div class="item">\
                               <div class="row no-margin">\
                                    <div class="col-xs-12" style="font-size:18px;">'+arr.industryName+'</div>\
                                </div>\
                                <div class="row no-margin">\
                                    <div class="col-xs-3">'+arr.scheduleName+'</div>\
                                    <div class="col-xs-3"><em style="font-size:18px;">'+arr.schedule+'</em>%</div>\
                                    <div class="col-xs-6">\
                                        <div class="progress">\
                                            <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"\
                                                 style="width: '+arr.schedule+'%;">\
                                            </div>\
                                        </div>\
                                    </div>\
                                </div>\
                                <div class="row samll-font no-margin">\
                                    <div class="col-xs-3">排名</div>\
                                    <div class="col-xs-9">\
                                        <span class="yellow-bg"></span>\
                                        <p>'+arr.predictName+': '+arr.predictValue+arr.unit+'</p>\
                                    </div>\
                                </div>\
                                <div class="row samll-font no-margin">\
                                    <div class="col-xs-3"><em>'+arr.ranking+'</em></div>\
                                    <div class="col-xs-9">\
                                        <span class="blue-bg"></span>\
                                        <p>'+arr.accumulativeName +': '+arr.accumulativeValue+arr.unit+'</p>\
                                    </div>\
                                </div>\
                            </div>';
                    }
                    $(".content").html(html);
                }
            }
        })

    })
</script>
</body>

</html>
